<template>
  <div class="m-tabs" :class="position=='center'?'center':''">
    <div
      class="m-tab"
      :class="item.id==active?'active':''"
      v-for="(item,index) in tabList"
      :key="index"
      @click="toggleTab(item)"
    >
      <p class="text">
        {{item.name}}
        <span class="text-border"></span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "mTabs",
  components: {},
  props: {
    tabList: {
      type: Array,
      default: []
    },
    position: {},
    active: {}
  },
  model: {
    prop: "active",
    event: "change"
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    toggleTab(item) {
      this.$emit("change", item.id);
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
</style>
